import React, { Component } from 'react'
import { Text, StyleSheet, View, FlatList, ScrollView, Image } from 'react-native'
import PropTypes from 'prop-types'
import { px2dp } from '../../../utils/util';


export default class Shopcar_list extends Component {

  static propTypes = {
    data: PropTypes.array,
  }
  filterList(keyArr,oddsObj){
    let choseObj = {}
    keyArr.forEach(item=>{
      if(oddsObj[item].chose){
        choseObj[item] = oddsObj[item]
      }
    })
    return choseObj
  }
  concatStr(ObjList,list,oddsName){
    let oddsInfo = ObjList[oddsName];
    let keyValueArr = Object.entries(list);
    let str = keyValueArr.reduce((str,arr)=>{
      let [key,value] = arr;
      let concatStrs = `${oddsInfo[key]}(${value.value})`;
      if(str){
        str += `, ${concatStrs}`
      }else{
        str += `${concatStrs}` 
      }
      return str
      
    },'')
    console.log(str);
    return str 
  }
  toOddsStr(oddsName,oddsObj,item){
    let ObjList = {
      'odds_1_all': {
        playName: '胜负',
        '03': '主胜',
        '00': '客胜'
      },
      'odds_2_all': {
        playName: '让分',
        '03': '让主胜',
        '00': '让客胜'
      },
      'odds_3_all': {
        playName: '胜分差',
        '03-5': '1-5',
        '03-10': '6-10',
        '03-15': '11-15',
        '03-20': '16-20',
        '03-25': '21-25',
        '03-26': '26+',
        '00-5': '1-5',
        '00-10': '6-10',
        '00-15': '11-15',
        '00-20': '16-20',
        '00-25': '21-25',
        '00-26': '26+',
      },
      'odds_4_all': {
        playName: '大小分',
        '03': '大',
        '00': '小'
      },
    }
    let keyArr = Object.keys(oddsObj);
    let filterList = this.filterList(keyArr,oddsObj);
    let lens = Object.keys(filterList).length;
    if(lens){
      let playName = ObjList[oddsName].playName;
      return (
        <View style={[listStyle.flexLeftBox,listStyle.row,]}>
          <View style={[listStyle.rowLeft]}>
            <Text style={[listStyle.rowLabel]}>{playName}：</Text>
            {oddsName == 'odds_2_all'?<Text style={[listStyle.rowScore]}>{item.rq>0?`+${item.rq}`:item.rq}</Text>:null}
            {oddsName == 'odds_4_all'?<Text style={[listStyle.rowScore]}>{item.sd}</Text>:null}
            
          </View>
          <View style={[listStyle.rowRight]}>
            <Text style={[listStyle.rightText]}>{this.concatStr(ObjList,filterList,oddsName)}</Text>
          </View>
        </View>
      )
    }else{
      return null
    }
  }
  computedNum(item){
    let oddsList = ['odds_1_all','odds_2_all','odds_3_all','odds_4_all'];
    return oddsList.map(oddsKey => this.toOddsStr(oddsKey,item[oddsKey],item))
  }
  _renderItem(item,index){
    let len = this.props.data.length;
    let {changci,guest,host} = item;
    return (
      <View style={[listStyle.itemWrap,listStyle.paddingTheme,index === len - 1 ?{}:listStyle.bottomBorder]}
        key={index}
      >
        <View style={[listStyle.titleBox,listStyle.flexLeftBox]}>
          <Text style={[listStyle.titleText,listStyle.leftTitle]}>{changci.substr(0,2)}</Text>
          <View style={[listStyle.rightTitle,listStyle.flexLeftBox]}>
            <Text style={listStyle.titleText}>{guest} </Text>
            <Text style={listStyle.vsStyle}>&nbsp;&nbsp;&nbsp;vs&nbsp;&nbsp;&nbsp;</Text>
            <Text style={listStyle.titleText}>{host} </Text>
          </View>
        </View>
        <View style={[listStyle.itemBox,listStyle.flexAroundBox]}>
          <View style={[listStyle.itemContent]}>
            {this.computedNum(item)}
          </View>
          <Image source={require('../../../assets/image/close_icon.png')} style={{width: px2dp(40),height: px2dp(40)}}></Image>
        </View>

      </View>
      
    )
    
  }

  render() {
    let {data} = this.props;
    // let nweWW = [];
    // for (let index = 0; index < 8; index++) {
    //   nweWW.push(...data);
      
    // }
    return (
      <ScrollView
        // style={{flex:1}}
      >
        <FlatList
          // data={nweWW}
          data={data}
          // extraData={{...this.state,...this.props}}
          // numColumns = {2}
          // contentContainerStyle = {listStyle.contentList}
          style={listStyle.list}
          renderItem={({ item, index }) => this._renderItem(item,index)}
        />
      </ScrollView>
      
    )
  }
}

const listStyle = StyleSheet.create({
  list: {
    backgroundColor: '#fff',
    height: '100%'

  },
  // contentList: {
  //   paddingBottom: px2dp(300)
  // },
  flexLeftBox: {
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center',
  },
  flexAroundBox: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  titleBox: {
    backgroundColor: '#fff',
    paddingBottom: px2dp(20),
    height: px2dp(80),
  },
  paddingTheme: {
    marginHorizontal: px2dp(30)
  },
  itemWrap:{
    backgroundColor: '#fff',
    paddingBottom: px2dp(30),
    
  },
  bottomBorder: {
    borderBottomColor: '#ccc',
    borderStyle: 'solid',
    borderBottomWidth:  px2dp(1),
  },
  leftTitle: {
    flex: 1
  },
  rightTitle: {
    flex: 3
  },
  titleText: {
    color: '#333',
    fontSize: px2dp(30),
  },
  vsStyle: {
  },
  itemBox: {

  },
  itemContent: {
    paddingVertical: px2dp(20),
    paddingLeft: px2dp(20),
    backgroundColor: '#f4f4f4',
    width: px2dp(570),
    borderRadius: px2dp(8)

  },
  row: {
    alignItems: 'flex-start',
    marginBottom: px2dp(5),
    minHeight: px2dp(50)
  },
  rowLeft: {
    width: px2dp(120),
    alignItems: 'flex-end',
  },
  rowLabel: {
    color: '#333'
  },

  rowScore: {
    paddingRight: px2dp(26),
    color: 'gray',
    fontSize: px2dp(22)
  },
  rowRight:{
    flex: 1,
  },
  rightText:{
    color: '#ff473a'
  } 
})
